<template>
  <div class="main_box">
    <div class="box_item">
      <div class="item_title">注册界面</div>
      <div style="margin: 5px">
        <el-form :model="form">
          <el-form-item label="账号">
            <el-input
              v-model="form.username"
              :suffix-icon="User"
              style="width: 240px"
              placeholder="请输入用户名"
            />
          </el-form-item>
          <el-form-item label="密码">
            <el-input
              v-model="form.password"
              :suffix-icon="Lock"
              style="width: 240px"
              type="password"
              placeholder="请输入密码"
              clearable
              show-password
            />
          </el-form-item>
          <el-form-item prop="qrcode">
            <el-input
              v-model="form.qrcode"
              :suffix-icon="Lock"
              style="width: 140px"
              placeholder="请输入验证码"
            />
            <img
              :src="'http://localhost:8079/api/auth/qrcode/' + code"
              :alt="code"
              class="qrCode_img"
              @click="checkQrCode"
            />
          </el-form-item>
        </el-form>
      </div>
      <el-button type="warning" style="width: 90%" @click="reRegister">注册</el-button>

      <el-divider>登录/注册</el-divider>
      <el-button type="primary" style="width: 90%" @click="Login">登录</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import { User, Lock } from "@element-plus/icons-vue";
import type { FormInstance } from "element-plus";
import axios from "axios";
import router from "../../router";
const form = reactive({
  username: "",
  password: "",
  qrcode: "",
});
const code = ref("");
const Login = () => {
  router.push("/auth/login");
};
const checkQrCode = () => {
  code.value = String(Math.floor(Math.random() * 9000 + 1000));
};
checkQrCode();

const reRegister = () => {
  if (form.username == "" || form.username.length > 20 || form.username.length < 4) {
    ElMessage({
      message: "用户名不能为空，且用户名应4-20位",
      type: "error",
      grouping: true,
    });
  } else if (
    form.password == "" ||
    form.password.length > 20 ||
    form.password.length < 4
  ) {
    ElMessage({
      message: "密码不能为空，且密码应4-20位",
      type: "error",
      grouping: true,
    });
  } else if (form.qrcode == code.value) {
    const req = {
      username: form.username,
      password: form.username,
      role: "school",
    };

    axios
      .post("/api/auth/register", req)
      .then((res) => {
        console.log(res);
        if (res.data.success) {
          localStorage.setItem("order_auth_token", res.data.message);
          router.push("/");
        } else {
          ElMessage({
            message: res.data.message,
            type: "error",
          });
        }
      })
      .catch((err) => {
        console.log(err);
      });
  } else
    ElMessage({
      message: "验证码错误",
      type: "info",
      grouping: true,
    });
};
</script>

<style lang="scss" scoped>
.main_box {
  display: flex;
  align-items: center;
  justify-content: center;

  .box_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    .item_title {
      font-size: 22px;
      margin: 5px;
    }
    .qrCode_img {
      height: 40px;
      width: 140px;
      margin-left: 5px;
    }
  }
}
</style>
